<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="工作汇报" hidden-breadcrumb />
        </div>
        <!--    公共筛选查询区域-->
        <Card :bordered="false" dis-hover >
            <!--筛选查询条件区域-->
            <!--            <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition" >-->
            <!--                <Row :gutter="24" type="flex" justify="end">-->
            <!--                    <Col v-bind="grid">-->
            <!--                        <FormItem label="员工姓名：" prop="name" label-for="name" >-->
            <!--                            <Input v-model="data.name" placeholder="请输入关键字" element-id="name"/>-->
            <!--                        </FormItem>-->
            <!--                    </Col>-->
            <!--                    <Col v-bind="grid" class="ivu-text-right">-->
            <!--                        <FormItem>-->
            <!--                            <Button type="primary" @click="getData">查询</Button>-->
            <!--                        </FormItem>-->
            <!--                    </Col>-->
            <!--                </Row>-->
            <!--            </Form>-->
            <!--新增-->
            <!--  <div class="buttonContain" >
                  <Button  @click="handleOpenCreate"  type="primary">新增</Button>
              </div>-->
        </Card>
        <!--数据渲染区域-->
        <div class="i-table-no-border">
            <!--        <Button type="primary" icon="md-add" @click="handleOpenCreate">新增</Button>-->
            <Table
                    ref="table"
                    :columns="columnslist"
                    :data="dataWithPage"
                    :loading="loading"
            >
                <template slot-scope="{ row }" slot="slotUsersName">
                   <span v-for="item in row.users">
                       {{item.nickName}}
                   </span>
                </template>
                <template slot-scope="{ row }" slot="slotDeptName">
                   <span >
                       {{row.dept.deptName}}
                   </span>
                </template>

                <template slot-scope="{ row}" slot="action">
                    <a @click="showDetail(row.workId)">详情</a>
                    <Divider type="vertical" />
                    <!--                    <a @click="handleEdit(row.workId)" :style="{'color':'#4AABF2'}">编辑</a>-->
                    <a @click="handleDelete(row.workId)" :style="{'color':'red'}">删除</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page :total="limitData.length" show-elevator :current.sync="current"  show-total />
            </div>

        </div>
    </div>

</template>

<script>
    import { mapState } from 'vuex';
    import worksReport from "@/api/worksReport";
    export default {
        data(){
            return{
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                data: {
                    name: '',
                },
                //验证规则
                rules: {
                },
                dayak:[],
                count: 10,
                current: 1,
                list: [],
                size: 10,
                datalist: [],
                columnslist: [
                    {
                        title: '序号',
                        key: 'workId',
                        minWidth: 80

                    },
                    {
                        title: '员工姓名',
                        slot:'slotUsersName',
                        minWidth: 80
                    },
                    {
                        title: '所属部门',
                        slot:'slotDeptName',
                        minWidth: 80
                    },
                    {
                        title: '本周完成内容',
                        key: 'workDown',
                        minWidth: 120
                    },
                    {
                        title: '本周未完成工作',
                        key: 'workLeft',
                        minWidth: 120
                    },
                    {
                        title: '本周工作总结',
                        key: 'thisWeekZJ',
                        minWidth: 120
                    },
                    {
                        title: '下周工作计划',
                        key: 'nextWeekPlan',
                        minWidth: 120
                    },{
                        title: '备注',
                        key: 'workRemark',
                        minWidth: 80
                    },{
                        title: '上报时间',
                        key: 'reportTime',
                        minWidth: 100
                    },

                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        minWidth: 140
                    }
                ],
                loading: false,
            }
        },
        computed: {
            limitData () {
                let data = [...this.list];
                return data;
            },
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 100;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            },
            // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
            dataWithPage () {
                const data = this.limitData;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end);
            },
        },
        created() {
            this.getData();
        },
        methods: {
            //调用数据
            getData(){

                this.current = 1;
                this.loading = true;
                worksReport.findByPage({
                    workReportType:2,//周报数据
                    nickName:this.data.name
                })
                    .then(res => {
                        // 返回数据
                        this.list = res;
                        console.log(res);
                        console.log(res[0].dept);
                        this.loading = false;
                    })
                    .catch(err => {
                        // 异常情况
                    })
            },
            handleSubmit () {
                this.$emit('on-submit', this.data);
            },
            handleReset () {
                this.$refs.form.resetFields();
                this.$emit('on-reset');
            },
            /*新增*/
            handleOpenCreate(){
                this.$router.push('/employee/comuser/comuser-add')
            },
            // 新增数据
            handleCreate () {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        if (this.updateIndex < 0) {
                            // 新建
                            const mockData = this.mockOneData();
                            mockData.desc = this.createData.desc;
                            mockData.date = new Date();
                            this.list.splice(0, 0, mockData);
                            this.$Message.success('创建成功');
                        } else {
                            // 修改
                            const updateItemName = this.dataWithPage[this.updateIndex].name;
                            const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
                            this.list[updateItemIndex].desc = this.createData.desc;
                            this.$Message.success('修改成功');
                        }

                        this.showCreate = false;
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });
            },
            // 详情
            showDetail (workId) {
                this.$router.push({
                    path: '/works/workDetails',
                    name:'workDetails',
                    query:{
                        workId
                    }
                });
            } ,
            //编辑
            handleEdit(dxmbTywysbm){
                const item = dxmbTywysbm;
                console.log(item);
                // this.$router.push('/evaluationDecision/fireInfo-details')
                this.$router.push({
                    path: '/employee/comuser/comuser-add',
                    name:'comuser-add',
                    params:{
                        item,
                        index: 'edit'
                    }
                });

            },
            //删除
            handleDelete (workId) {
                this.$Modal.confirm({
                    title: '删除',
                    content: '确定删除吗？',
                    onOk: () => {
                        worksReport.deleteReportById({
                            workId
                        })
                            .then(res => {
                                // 返回数据
                                this.$Message.success('删除成功');
                                this.getData();
                            })
                            .catch(err => {
                                // 异常情况
                            })

                    }
                });
            }
        },
    }
</script>


<style lang="less" scoped>
    .buttonContain{
        >button{
            width: 120px;
            height: 40px;
            font-size: 16px;
        }
    }

</style>
